<template>
    <div>
        <div class="container">
            <div class="userData users" v-show="isLogin[user_id]">
                <div class="portrait"></div>
                <div class="username">羽公子
                    <span class="member"></span><br/>
                    <div class="phone">
                        <span class="phone">173****0341</span>
                        <span class="edit"></span>
                    </div>
                </div>
                <div class="msgBox">
                    <label class="codeWrap">
                        <label class="code"></label>
                    </label>
                    <div class="msg">
                        <span class="redPoint"></span>
                    </div>
                </div>
                <div class="memberCenter"></div>
            </div>
            <div class="userLogin users" v-show="!isLogin[user_id]">
                <div class="portrait"></div>
                <div class="username">
                    <span class="member"></span><br/>
                    <div class="phone">
                        <span class="phone"></span>
                        <span class="edit"></span>
                    </div>
                </div>
                <router-link to='/login' class="loginBtn">登录/注册</router-link>
                <div class="msgBox">
                    <label class="codeWrap">
                        <label class="code"></label>
                    </label>
                    <div class="msg"></div>
                </div>
                <div class="memberCenter"></div>
            </div>
            <div class="wallet">
                <div class="list">
                    <div class="item redWal">
                        <div class="num">
                            <span></span>
                            我的钱包
                        </div>
                    </div>
                    <div class="item">
                        <div class="num">
                            <span v-show="isLogin[user_id]">1</span>
                            <span v-show="!isLogin[user_id]">--</span>
                            红包
                        </div>
                    </div>
                    <div class="item">
                        <div class="num">
                            <span v-show="isLogin[user_id]">4</span>
                            <span v-show="!isLogin[user_id]">--</span>
                            优惠券
                        </div>
                    </div>
                    <div class="item">
                        <div class="num">
                            <span v-show="isLogin[user_id]">2</span>
                            <span v-show="!isLogin[user_id]">--</span>
                            鲜豆
                        </div>
                    </div>
                    <div class="item">
                        <div class="num">
                            <span v-show="isLogin[user_id]">1</span>
                            <span v-show="!isLogin[user_id]">--</span>
                            激活白条
                        </div>
                    </div>
                </div>
            </div>
            <div class="redPac">
                <img src="../../static/my/cacf7167cf7d6caf.png">
            </div>
            <div class="mysBox">
                <div class="mys" v-for='val in myArr' :key="val.id">
                    <img :src="imgUrl+val.arr">
                    {{val.title}}
                </div>
            </div>
            <div class="quitBox">
                <div class="quit" v-show="isLogin[user_id]" @click="loginOut">退出账号</div>
            </div>
        </div>
        <AppFooter active='myTab'></AppFooter>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data(){
        return {
            myArr:[],
        }
    },
    props:['user_id'],
    created(){
        this.getMy();
    },
    methods:{
        getMy(){
            this.axios.get('/my').then((ret)=>{
                let {data,error}=ret.data;
                this.myArr=data;
            }).catch(()=>{})
        },
        loginOut(){
            this.$set(this.isLogin,this.user_id,false);
            console.log(1);
        }
    }
}
</script>

<style scoped lang='scss'>
.container{
    background: #f4f4f4;
    .users{
        position: relative;
        padding-top: 56px;
        min-height: 213px;
        color:#fff;
        background:#fff url(/static/my/my_bgnew.png) center bottom no-repeat;
        background-size: cover;
        overflow: hidden;
        .portrait{
            background: url(/static/my/zailie.jpg) no-repeat;
            background-size: auto 142px;
            display: inline-block;
            width: 142px;
            height: 142px;
            margin-left: 37px;
            border-radius: 142px;
            vertical-align: middle;
            text-align: center;
        }
        .msgBox{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height:117px;
            z-index: 20;
            .codeWrap{
                z-index: 2;
                display: inline-block;
                position: absolute;
                right: 93px;
                top: -11px;
                padding: 46px 0 46px 46px;
                .code{
                    float: left;
                    margin-right: 28px;
                    width: 50px;
                    height: 50px;
                    background:url(/static/my/icon_er.png) no-repeat;
                    background-size: 50px;
                }
            }
            .msg{
                display: inline-block;
                width: 50px;
                height: 50px;
                background:url(/static/my/user_message_icon.png) no-repeat;
                background-position: center center;
                background-size: 50px;
                position: absolute;
                right: 0;
                top: -11px;
                padding: 46px 11px 46px 46px;
                .redPoint{
                    display: inline-block;
                    width: 11px ;
                    height: 11px;
                    background:#f00;
                    position: absolute;
                    right: 30px;
                    top: 42px;
                    border-radius: 11px;
                }
            }
        }
        .memberCenter{
            display: inline-block;
            width: 239px;
            height: 152px;
            background: url(/static/my/icon_vip_card_new.png) no-repeat;
            background-size: 239px 152px;
            position: absolute;
            right: 0;
            bottom: -3px;
            animation:vip_animate 6s;
            @keyframes vip_animate{
                0%{
                    bottom:-3px;
                }
                16%{
                    bottom:-8px;
                    transform:rotate(1deg);
                }
                33%{
                    bottom:2px;
                    transform:rotate(0deg);
                }
                50%{
                    bottom:-8px;
                    transform:rotate(1deg);
                }
                66%{
                    bottom:2px;
                    transform:rotate(0deg);
                }
                83%{
                    bottom:-8px;
                    transform:rotate(1deg);
                }
                100%{
                    bottom:-3px;
                }
            }
        }
    }
    .userData{
        .username{
            display: inline-block;
            padding-left: 23px;
            vertical-align: middle;
            line-height: 1.9;
            position: relative;
            top: 0;
            font-size: 30px;
            .member{
                background: url(/static/my/vip_icon_gray.png) no-repeat;
                background-size: 40px;
                background-position: 0 14px;
                padding: 11px 11px 9px 48px;
            }
            .phone{
                display: inline-block;
                height: 48px;
                line-height: 48px;
                position: relative;
                padding-right: 46px;
                font-size: 35px;
                color:#fff;
                .edit{
                    display: inline-block;
                    width: 32px;
                    height: 32px;
                    position: absolute;
                    top: 7px;
                    right: 46px;
                    background:url(/static/my/icon_edit.png) no-repeat;
                    background-size: 32px 32px;
                }
            }
        }
    }
    .userLogin{
        .portrait{
            background: url(/static/my/bg_head_new.png) no-repeat;
            background-size: 142px 142px;
        }
        .username{
            display: none;
        }
        .memberCenter{
            display: none;
        }
        .loginBtn{
            text-decoration:none;
            display: inline-block;
            height: 37px;
            padding: 14px 23px 18px;
            color:#fff;
            border-radius: 4px;
            font-size: 32px;
            line-height: 37px;
            letter-spacing: 2px;
            background-color: #69c575;
            margin-left: 11px;
            z-index: 21;
        }
    }
    .wallet{
        height: 163px;
        margin-bottom: 23px;
        padding-left: 35px;
        background-color: #fff;
        .list{
            padding-top: 46px;
            padding-bottom: 28px;
            position: absolute;
            left: 0;
            top: 241px;
            width: 750px;
            z-index: 15;
            font-size: 0;
            background:url(/static/my/user_wallet_bg.png) no-repeat;
            background-size: 100%;
            background-position: 0 0;
            .item{
                width: 20%;
                display: inline-block;
                text-align: center;
                position: relative;
                .num{
                    line-height: 58px;
                    text-align: center;
                    font-size: 28px;
                    position: relative;
                    color: #333;
                    height: 117px;
                    span{
                        display: block;
                        height: 58px;
                        line-height: 58px;
                        font-size: 32px;
                        color:#323232;
                    }
                }
            }
            .redWal{
                span{
                    position: relative;
                    left: 50%;
                    background:url(/static/my/icon_packet.png) no-repeat;
                    background-size: 58px 58px;
                    display: block;
                    width: 58px;
                    height: 58px;
                    margin-left: -28px;
                }
                &::after{
                        height: 100%;
                        content: '';
                        width: 70px;
                        position: absolute;
                        top: 0;
                        left: 110%;
                        z-index:2;
                        background:url(/static/my/packet-right-border@2x.png) no-repeat;
                        background-size: 10px 103px;
                    }
            }
        }
    }
    .redPac{
        width: 100%;
        height: 177px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .mysBox{
        margin-bottom: 23px;
        background-color:#fff;
        display: flex;
        flex-wrap: wrap;
        .mys{
            display: block;
            padding: 2px 0 58px 0;
            width: 25%;
            border-bottom: 2px solid #e8e8e8;
            text-align: center;
            line-height: 81px;
            position: relative;
            color:#333;
            font-size: 35px;
            height: 117px;
            overflow: hidden;
            &:nth-child(9),&:nth-child(10),&:nth-child(11){
                border-bottom:0;
            }
            img{
                display: block;
                width: 103px;
                height: 103px;
                margin: 0 auto;
            }
        }
    }
    .quitBox{
        padding-bottom: 150px;
        .quit{
            margin-top: 18px;
            height: 107px;
            color: #ff5757;
            text-align: center;
            font-size: 37px;
            line-height: 107px;
            background-color:#fff;
        }
    }
}
</style>
